<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/myJS/custom.js"></script>
    <script src="/static/JQuery/jquery-3.3.1.min.js"></script>


</head>
<body class="layui-layout-body" style="padding: 10px">
<form class="layui-form">
    <div class="layui-inline">
        搜索：
        <div class="layui-inline">
            <select class="layui-input layui-select" name="fktypeid" id="fktypeid" lay-search=""></select>
        </div>
        <div class="layui-inline">
            <select class="layui-input layui-select" name="fkstateid" id="fkstateid" lay-search=""></select>
        </div>
        <button class="layui-btn" type="button" id="search" data-type="reload">搜索</button>
        <!--<button class="layui-btn" type="button" id="insert" data-type="insert">添加</button>-->
    </div>
</form>

<table id="table" lay-filter="tableFilter"></table>

</body>

</html>

<script>
    //JavaScript代码区域
    layui.use(['element','table','laydate','layer','form'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;

        table.render({
            id:"recordTable"
            ,elem: '#table'
            ,toolbar: '#toolbar'
            ,url:"/restful/find"
            ,page: true //开启分页
            ,method:"POST"
            ,contentType: 'application/json'
            ,where:{
                firstTable: 'records',
                relations:{
                    "records.fkgoodsid": "goods.goodsid",
                    "records.fkorderid": "orders.orderid",
                    "orders.fkstateid": "states.stateid",
                    "orders.fkaddressid": "addresses.addressid"
                },
                wheres:[
                    {field:"records.fkgoodsid", value:localStorage.goodsid}
                ]
            }
            ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [
                [ //表头
                    {field: 'recordid', title: 'ID', hide: true}
                    ,{field: 'goodsname', title: '商品名称', width:100,sort: true, fixed: 'left'}
                    ,{field: 'goodsprice', title: '单价',sort: true}
                    ,{field: 'recordnum', title: '购买数',sort: true}
                    ,{field: 'recordprice', title: '总价',sort: true}
                    ,{field: 'ordertime', title: '下单时间', width:200, sort: true}
                    ,{field: 'statename', title: '订单状态', sort: true}
                    ,{field: 'addressdesc', title: '收货地址', width:200, sort: true}
                    ,{field: 'star', title: '用户评分',sort: true}
                    ,{field: 'remarktime', title: '评价时间', width:200, sort: true}
                    ,{field: 'remark', title: '用户评论',sort: true}
                ]
            ]
            ,done : function () {
                var type = $('#fktypeid');
                if(type.children().length == 0){
                    $.ajax({
                        url:"/restful/find",
                        type:"POST",
                        data:JSON.stringify({"firstTable":"types"}),
                        contentType: "application/json;charset=utf-8",
                        dataType : "json",
                        async:false,
                        success : function(result) {
                            var data = result.data;
                            var count = result.count;
                            type.append('<option value="">全部商品类型</option>');
                            for(var i = 0 ; i < count ; i ++){
                                type.append("<option value='" + data[i].typeid + "'>" + data[i].typename + "</option>");
                            }
                            form.render("select");
                        },
                        error:function(msg){
                            layer.alert(msg);
                            $('#fktypeid').append("<option value=''>加载错误</option>");
                        }
                    });
                }

                var state = $('#fkstateid');
                if(state.children().length == 0){
                    $.ajax({
                        url:"/restful/find",
                        type:"POST",
                        data:JSON.stringify({"firstTable":"states"}),
                        contentType: "application/json;charset=utf-8",
                        dataType : "json",
                        async:false,
                        success : function(result) {
                            var data = result.data;
                            var count = result.count;
                            state.append('<option value="">全部订单状态</option>');
                            for(var i = 0 ; i < count ; i ++){
                                state.append("<option value='" + data[i].stateid + "'>" + data[i].statename + "</option>");
                            }
                            form.render("select");
                        },
                        error:function(result){
                            layer.alert(result.msg);
                            $('#fkstateid').append("<option value=''>加载错误</option>");
                        }
                    });
                }
            }
        });

        //监听单元格编辑
        table.on('edit(tableFilter)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            $.ajax({
                url:"/record/updateListNum/"+ value + "/" + data.recordid,
                type:"GET",
                dataType : "json",
                async:false,
                success : function(result) {
                    if(result.code == 0){
                        layer.msg(result.msg + '更改为：'+ value, {icon:1});
                    }else{
                        layer.msg(result.msg, {icon:5} );
                    }
                },
                error:function(result){
                    layer.msg(result.msg, {icon:5} );
                }
            });
        });

        var $ = layui.$, active = {
            reload: function(){
                var fkstateid = $("#fkstateid option:selected").val();
                var fktypeid = $("#fktypeid option:selected").val();

                //执行重载-指定重载表格的id
                table.reload('recordTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        wheres: [
                            {field:"orders.fkstateid", value: fkstateid},
                            {field:"goods.fktypeid", value: fktypeid}
                        ]
                    }
                });
            }
        };


        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        $('#insert').on('click', function(){
            localStorage.clear();
            layer.open({
                type: 2,
                title: 'iframe父子操作',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['800px' , '520px'],
                content: "myAddressEdit",
                skin: 'layui-layer-rim',
                end : function(){
                    table.reload("recordTable");
                }
            });
        });

        //监听行工具事件
        table.on('tool(tableFilter)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                /**/
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:"/restful/delete/record",
                        type:"POST",
                        data:JSON.stringify([data.recordid]),
                        contentType: "application/json;charset=utf-8",
                        dataType : "json",
                        async : false,
                        success : function() {
                            obj.del();
                            layer.msg("删除成功", {icon:1});
                        },
                        error:function(msg){
                            layer.msg("删除失败", {icon:5});
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                if(data.statename !== '订单完成'){
                    layer.msg("该订单状态下不能评价", {icon:5});
                    return;
                }
                if(data.remarktime != null){
                    layer.msg("您已评价，不能重复评价", {icon:5});
                    return;
                }

                // layer.msg('ID：'+ data.recordid + ' 的查看操作');
                localStorage.recordid = data.recordid;
                layer.open({
                    type: 2,
                    title: 'iframe父子操作',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['500px' , '300px'],
                    content: "myRecordEdit",
                    skin: 'layui-layer-rim',
                    end : function(){
                        table.reload("recordTable");
                    }
                });
                //layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

    });
</script>
